<template>
  <div class="eir-info">
    <x-header>装箱单</x-header>
    <box gap="10px">
      <table>
        <!-- 做箱时间 -->
        <tr>
          <td class="td-title1"></td>
          <td class="td-title2">做箱时间</td>
          <td class="td-date">{{orderInfo.startTime}}</td>
          <td>EIR:{{orderInfo.eirCode}}</td>
        </tr>
        <tr>
          <td class="td-title1" rowspan="4">位置信息</td>
          <td class="td-title2">装箱人</td>
          <td colspan="2">上海有限公司</td>
        </tr>
        <tr>
          <td class="td-title2">门店</td>
          <td colspan="2">{{orderInfo.doorName}}</td>
        </tr>
        <tr>
          <td class="td-title2">提箱点</td>
          <td colspan="2">{{orderInfo.yard}}</td>
        </tr>
        <tr>
          <td class="td-title2">还箱点</td>
          <td colspan="2">{{orderInfo.port}}</td>
        </tr>
        <!-- 港航信息 -->
        <tr>
          <td class="td-title1" rowspan="5">港航信息</td>
          <td class="td-title2">运营人</td>
          <td colspan="2">{{orderInfo.theOperator}}</td>
        </tr>
        <tr>
          <td class="td-title2">航名/航次</td>
          <td colspan="2">{{orderInfo.boat}}/{{orderInfo.voyage}}</td>
        </tr>
        <tr>
          <td class="td-title2">装货港</td>
          <td colspan="2">{{orderInfo.zhuanghuogang}}</td>
        </tr>
        <tr>
          <td class="td-title2">卸港</td>
          <td colspan="2">CAVA2</td>
        </tr>
        <tr>
          <td class="td-title2">交货地</td>
          <td colspan="2">{{orderInfo.placeName}}</td>
        </tr>
        <!-- 箱信息 -->
        <tr>
          <td class="td-title1" rowspan="6">箱信息</td>
          <td class="td-title2">箱型尺寸</td>
          <td colspan="2">{{orderInfo.type}}</td>
        </tr>
        <tr>
          <td class="td-title2">箱号</td>
          <td style="position: relative;" colspan="2" rowspan="2">
            <div class="pic-wrap">
              <div class="col-1">
                <span>{{orderInfo.carton}}</span>
                <span>{{orderInfo.tweight}}</span>
              </div>
              <div class="col-2">
                <img @click="showPhoto(1)" ref="photo1" src="../../assets/photo.png">
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="td-title2">箱皮重量</td>
        </tr>
        <tr>
          <td class="td-title2">封号</td>
          <td style="position: relative;" colspan="2" rowspan="2">
            <div class="pic-wrap">
              <div class="col-1">
                <span>{{orderInfo.titles}}</span>
                <span>{{orderInfo.fxstatus}}</span>
              </div>
              <div class="col-2">
                <img @click="showPhoto(2)" ref="photo2" src="../../assets/photo.png">
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="td-title2">箱状态</td>
        </tr>
        <tr>
          <td class="td-title2">操作</td>
          <td colspan="2">
            <button @click="takePhoto(1)">拍照1</button>
            <button @click="takePhoto(2)">拍照2</button>
            <button @click="uploadPhoto(1)">上传1</button>
            <button @click="uploadPhoto(2)">上传2</button>
          </td>
        </tr>
        <!-- 货信息 -->
        <tr>
          <td class="td-title1" rowspan="5">货信息</td>
          <td class="td-title2">提单号</td>
          <td colspan="2">
            <input type="text" v-model="orderInfo.blno">
            <button>提交</button>
          </td>
        </tr>
        <tr>
          <td class="td-title2">件数</td>
          <td colspan="2">
            <input type="text" v-model="orderInfo.num">
            <button>提交</button>
          </td>
        </tr>
        <tr>
          <td class="td-title2">毛重</td>
          <td colspan="2">
            <input type="text" v-model="orderInfo.gweight">
            <button>提交</button>
          </td>
        </tr>
        <tr>
          <td class="td-title2">体积</td>
          <td colspan="2">
            <input type="text" v-model="orderInfo.size">
            <button>提交</button>
          </td>
        </tr>
        <tr>
          <td class="td-title2">业务编号</td>
          <td colspan="2">{{orderInfo.number}}</td>
        </tr>
        <!-- 总计 -->
        <tr>
          <td class="td-title1">总计</td>
          <td colspan="3">
            <div class="total">
              <div class="col">
                <span>总件数</span>
                <span>{{orderInfo.num}}</span>
              </div>
              <div class="col">
                <span>总货量</span>
                <span>{{orderInfo.num*orderInfo.gweight}}</span>
              </div>
              <div class="col last">
                <span>总尺码</span>
                <span>{{orderInfo.size}}</span>
              </div>
            </div>
          </td>
        </tr>
        <!-- 司车信息 -->
        <tr>
          <td class="td-title1" rowspan="4">司车信息</td>
          <td class="td-title2">车牌号</td>
          <td colspan="2">{{orderInfo.plateNumber}}</td>
        </tr>
        <tr>
          <td class="td-title2">姓名</td>
          <td colspan="2">{{orderInfo.userName}}</td>
        </tr>
        <tr>
          <td class="td-title2">手机号</td>
          <td colspan="2">{{orderInfo.mobile}}</td>
        </tr>
        <tr>
          <td class="td-title2">身份证号</td>
          <td colspan="2">{{orderInfo.driverIdCard}}</td>
        </tr>
        <!-- 备注 -->
        <tr>
          <td class="td-title1">备注</td>
          <td colspan="3">{{orderInfo.mome}}</td>
        </tr>
        <!-- 签名 -->
        <tr class="signature-height">
          <td class="td-title1" rowspan="2">签名</td>
          <td colspan="3" style="position: relative;">
            <canvas id="signatureCanvas" class="signature-canvas"></canvas>
          </td>
        </tr>
        <tr>
          <td colspan="3" style="text-align: right;">
            <button @click="clearCanvas" style="margin-right: 10px;">清除签名</button>
            <button style="margin-right: 10px;">确认签名</button>
          </td>
        </tr>
      </table>
    </box>
    <previewer :list="phoneList" ref="previewer">
    </previewer>
  </div>
</template>

<script>
import {
  XHeader,
  Group,
  Cell,
  XButton,
  Actionsheet,
  Box,
  XInput,
  TransferDomDirective as TransferDom,
  Confirm,
  XDialog,
  Previewer
} from 'vux'
import {
  uploadEirPhoto,
  openCamera
} from '../../util/app'
export default {
  name: 'eirInfo',
  directives: {
    TransferDom
  },
  components: {
    XHeader,
    Group,
    Cell,
    XButton,
    Actionsheet,
    Box,
    XInput,
    Confirm,
    XDialog,
    Previewer
  },
  data () {
    return {
      orderInfo: {},
      phoneList: []
    }
  },
  mounted () {
    let query = this.$router.currentRoute.query
    if (query.hasOwnProperty('boxId')) {
      this.orderInfo = query
    }
  },
  methods: {
    takePhoto (index) {
      openCamera({
        success: (imageData) => {
          const src = 'data:image/jpeg;base64,' + imageData
          if (index === 1) {
            this.$refs.photo1.src = src
          } else if (index === 2) {
            this.$refs.photo2.src = src
          }
          const find = this.phoneList.findIndex(item => {
            return item.phoneIndex === index
          })
          if (find > -1) {
            this.phoneList.splice(find, 1)
          }
          this.phoneList.push({
            uploaded: false, // 是否上传
            phoneIndex: index, // 图片索引
            src: src
          })
        }
      })
    },
    uploadPhoto (index) {
      const find = this.phoneList.findIndex(item => {
        return item.phoneIndex === index
      })
      if (find > -1) {
        if (this.phoneList[find].uploaded) {
          alert('该图片已上传')
          return
        }
        this.$store.dispatch('app/showLoading', {
          text: '正在上传'
        })
        uploadEirPhoto({
          imageData: this.phoneList[find].src,
          callback: () => {
            this.phoneList[find].uploaded = true
            this.$store.dispatch('app/hideLoading')
          }
        })
      }
    },
    showPhoto (index) {
      const find = this.phoneList.findIndex(item => {
        return item.phoneIndex === index
      })
      if (find > -1) {
        this.$refs.previewer.show(find)
      } else {
        alert('请上传图片')
      }
    },
    clearCanvas () {
      const canvas = document.getElementById('signatureCanvas')
      const ctx = canvas.getContext('2d')
      ctx.clearRect(0, 0, canvas.width, canvas.height)
    }
  }
}
</script>

<style lang="less">
.signature-canvas{
  height: 100px;
  width: 100%;
}
.eir-info{
  box-sizing: border-box;
  position: relative;
  table, th, td{
    border: 1px solid #000;
    border-collapse: collapse;
  }
  table{
    width: 100%;
    table-layout: fixed;
    text-align: center;
    font-size: 13px;
    // word-wrap: break-word;
    // word-break: break-all;
  }
  .td-title1{
    width: 24px;
  }
  .td-title2{
    width: 70px;
  }
  .td-date{
    width: 80px;
  }
  .total{
    display: flex;
    .col{
      flex: 1;
      display: flex;
      flex-direction: column;
      border-right: 1px solid #000;
      &.last{
        border-right: 0;
      }
    }
  }
  .pic-wrap{
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    .col-1{
      border-right: 1px solid #000;
      width: 100px;
      text-align: center;
      display: flex;
      flex-direction: column;
      flex: 1;
      span{
        border-bottom: 1px solid #000;
      }
    }
    .col-2{
      width: 80px;
      line-height: 38px;
      max-height: 40px;
      overflow: hidden;
      img{
        vertical-align: middle;
        max-width: 80px;
        max-height: 40px;
      }
    }
  }
  .signature-height{
    height: 100px;
  }
  .upload-img{
    max-width: 80px;
    max-height: 80px;
    border-radius: 4px;
    margin-right: 10px;
    overflow: hidden;
  }
  .upload-picture-wrap{
    border: 1px dashed #D9D9D9;
    width: 80px;
    height: 80px;
    line-height: 95px;
    text-align: center;
    border-radius: 4px;
    vertical-align: middle;
    padding: 5px;
    box-sizing: border-box;
    &.success{
      border-color: #09BB07;
    }
  }
}
</style>
